<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-04-14 18:32:12
 * @Description  : 文档权限总览表
-->
<template>
  <table class="doc-table text-[13px] m-2">
    <thead class="doc-header">
      <tr>
        <td class="doc-item doc-title">文档权限管理</td>
        <td class="doc-item doc-title">文档列表</td>
        <td class="doc-item doc-title">文档预览</td>
        <td class="doc-item doc-title">下载/复制</td>
        <td class="doc-item doc-title">上传</td>
        <td class="doc-item doc-title">编辑新建</td>
        <td class="doc-item doc-title">删除</td>
        <td class="doc-item doc-title">分享</td>
        <td class="doc-item doc-title">管理权限</td>
      </tr>
    </thead>

    <tbody class="doc-body">
      <tr v-for="item in docRoles" :key="item.id">
        <td class="doc-item doc-title flex items-center">
          <i
            class="iconfont icon-yuandian-copy text-[24px]"
            :style="{
              color: item.label
            }"
          ></i>
          {{ item.name }}
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_LIST)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_VIEW)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_DOWNLOAD_COPY)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_UPLOAD)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_EDIT)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_REMOVE)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_SHARE)"
          ></i>
        </td>
        <td class="doc-item">
          <i
            class="iconfont icon-tick text-[#1890ff]"
            v-if="hasPermission(item, PERMISSIONS.DOC_MANAGE)"
          ></i>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { getRoleByPage } from '@/api/role'
import { PERMISSIONS } from '@/constants/permission'
import type { RoleRes } from '@/types/role'

const hasPermission = (item: RoleRes, ename: string) => {
  return item.Permissions.some((v) => v.ename === ename)
}

const docRoles = ref<RoleRes[]>([])
const loadPermission = () => {
  getRoleByPage({
    page: 1,
    pageSize: 999,
    type: 1
  })
    .then((res) => {
      docRoles.value = res.data.items
    })
    .catch(console.error)
}

onMounted(() => {
  loadPermission()
})
</script>

<style scoped lang="scss">
.doc-table {
  border-collapse: collapse;
  border-spacing: 0;

  .doc-item {
    padding: 8px 8px;
    border: 1px solid #e8edef;
    min-width: 50px;
    text-align: center;
    white-space: nowrap;
  }

  .doc-title {
    background: #f6f9ff;
    color: #222;
    text-align: left;
  }
}
</style>
